<script setup>
import LeftComponents from "@/components/leftComponents.vue";
import Http from "@/http/http.js";
import {onMounted, ref} from "vue";
import {subData} from "@/until/tool.js";
import {Message} from "@arco-design/web-vue";

const typeData = ref()
const formData = ref({
  GuestbookCompany: "", GuestbookPro: "", GuestbookName: "",
  GuestbookPhone: "", GuestbookDes: ""
})
onMounted(() => {
  getTypeData()
})
const getTypeData = async () => {
  const res = await Http.professionType()
  typeData.value = res['Data'].map(value => {
    if (value.ParentId === 1) {
      return value.TypeName;
    }
  })
}
const sub = (data) => {
  if (!data.GuestbookCompany) {
    Message.error("请选择行业!")
    return
  }
  if (!data.GuestbookPro) {
    Message.error("检测项目未填写!")
    return;
  }
  subData(data)
}
</script>

<template>
  <div class="c_banner">
    <div class="subpage_ad">
      <div class="bgimg pcitem" style="background-image: url(http://www.kjjcgroup.com/static/upload/image/20240309/1709960369399874.jpg)"></div>
      <div class="text capitalize">
        <div class="ad-tit">
          咨询报价 <br>
        <span style="font-size: 16px;color:#f5f5f5">详细报价请点击右侧按钮</span>
        </div>
      </div>
    </div>
  </div>
  <div class="wid p-t-10px p-b-10px">
    <a-space>
      <div class="">
        <icon-home/>
        您当前的位置:
      </div>
      <a-breadcrumb>
        <a-breadcrumb-item><a href="/">首页</a></a-breadcrumb-item>
        <a-breadcrumb-item>咨询报价</a-breadcrumb-item>
      </a-breadcrumb>
    </a-space>
  </div>
  <div class="wid flex justify-between">
    <div class="win_left">
      <div class="left_title">
        <div class="left_title_top"><b>咨询报价</b> <span><icon-list color="blue"/></span></div>
        <div class="left_title_con">
          <ul>
            <li>
              <a href="/company">公司简介</a>
            </li>
            <li>
              <a href="/contact">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
      <left-components/>
    </div>
    <div class="win_right">
      <div class="right_title">
        <span>咨询报价</span>
      </div>
      <div class="right_form">
        <a-form :model="formData" @submit="sub(formData)" auto-label-width class="w-50%">
          <a-form-item label="所属行业" required>
            <a-select v-model="formData.GuestbookCompany" placeholder="选择行业">
              <a-option v-for="item of typeData" :key="item" :value="item">{{ item }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="检测项目" required>
            <a-input v-model="formData.GuestbookPro" placeholder="检测项目"/>
          </a-form-item>
          <a-form-item label="称呼" required>
            <a-input v-model="formData.GuestbookName" placeholder="称呼"/>
          </a-form-item>
          <a-form-item label="电话" required>
            <a-input v-model="formData.GuestbookPhone" placeholder="电话"/>
          </a-form-item>
          <a-form-item label="咨询内容">
            <a-textarea v-model="formData.GuestbookDes" placeholder="咨询内容"/>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" :disabled="formData.GuestbookCompany.length===0 || formData.GuestbookPro.length===0 ||
             formData.GuestbookName.length===0 || formData.GuestbookPhone.length===0" html-type="submit" long>提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.right_form {
  padding: 30px;
  }
</style>
